home
***
CD-ROM
|
disk
|
FTP
|
other
***
search
/
MacAddict 123
/
MacAddict_123_2006_11.iso
/
Software
/
Productivity
/
iClip lite 2.wdgt
/
js
/
scripts.js
< prev
next >
Wrap
Text File
|
2006-08-05
|
22KB
|
582 lines
// Copyright © 2006, Inventive. //
// Classes //
// Bin //
function Bin() {
var self = this;
// Variables //
this.index = 0;
this.node = document.createElement("div");
this.fader = {out: false, callback: null, animator: new Animator(500, 13, 0, 1, function(animation, now, first, done) {
self.node.style.opacity = self.fader.out ? 1 - now : now;
if (self.fader.callback)
self.fader.callback(now);
})};
this.button1 = {disabled: false, hover: false, active: false};
this.button2 = {disabled: true, hover: false, active: false};
this.button3 = {disabled: true, hover: false, active: false};
this.iris = {open: true, callback: null, frame: 1, animator: new Animator(500, 13, 1, 14, function(animation, now, first, done) {
var nextFrame = Math.round(self.iris.open ? now : 15 - now);
if (nextFrame != self.iris.frame) {
self.iris.frame = nextFrame;
self.node.childNodes[1].src = "media/bin/" + self.iris.frame + ".png";
}
if (done) {
self.iris.open = !self.iris.open;
if (self.iris.callback)
self.iris.callback();
}
})};
this.highlighter = {out: false, animator: new Animator(250, 13, 0, 1, function(animation, now, first, done) {
self.node.childNodes[2].style.opacity = self.highlighter.out ? 1 - now : now;
if (done) {
if (!self.highlighter.out)
self.highlighter.animator.start();
self.highlighter.out = !self.highlighter.out;
}
})};
this.doubleclick = null;
// Create Bin //
var theBins = document.getElementById("bins");
this.node.setAttribute("style", "position: relative; display: inline-block; width: 10.2em; height: 11.5em;");
var node = document.createElement("canvas");
node.setAttribute("style", "position: absolute; left: 1.5em; top: 1.5em; width: 7.2em; height: 7.2em;");
this.node.appendChild(node);
node = document.createElement("img");
node.setAttribute("style", "position: absolute; width: 10.2em; height: 10.2em;");
node.setAttribute("src", "media/bin/1.png");
this.node.appendChild(node);
node = document.createElement("img");
node.setAttribute("style", "position: absolute; width: 10.2em; height: 10.2em; opacity: 0;");
node.setAttribute("src", "media/bin/highlighted.png");
this.node.appendChild(node);
node = document.createElement("img");
node.setAttribute("style", "position: absolute; left: 2.3em; bottom: 0; width: 4.6em; height: 3.2em;");
node.setAttribute("src", "media/bin/in/normal.png");
this.node.appendChild(node);
node = document.createElement("img");
node.setAttribute("style", "position: absolute; left: 5.3em; bottom: 0.2em; width: 3.1em; height: 3.1em;");
node.setAttribute("src", "media/bin/delete/disabled.png");
this.node.appendChild(node);
node = document.createElement("img");
node.setAttribute("style", "position: absolute; left: 6.8em; bottom: 0.7em; width: 3em; height: 4.4em;");
node.setAttribute("src", "media/bin/out/disabled.png");
this.node.appendChild(node);
node = document.createElement("div");
node.setAttribute("style", "position: absolute; left: 1.5em; top: 1.5em; width: 7.2em; height: 7.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control circle);");
//node.setAttribute("title", "Preview");
this.node.appendChild(node);
node = document.createElement("div");
node.setAttribute("style", "position: absolute; left: 4.7em; bottom: 0.8em; width: 1.2em; height: 1.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control rectangle);");
//node.setAttribute("title", "Paste");
this.node.appendChild(node);
node = document.createElement("div");
node.setAttribute("style", "position: absolute; left: 6.2em; bottom: 1.2em; width: 1.2em; height: 1.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control rectangle);");
//node.setAttribute("title", "Delete");
this.node.appendChild(node);
node = document.createElement("div");
node.setAttribute("style", "position: absolute; left: 7.6em; bottom: 1.8em; width: 1.2em; height: 1.2em; z-index: 1; -apple-dashboard-region: dashboard-region(control rectangle);");
//node.setAttribute("title", "Copy");
this.node.appendChild(node);
theBins.appendChild(this.node);
// Bin Events //
addEvent(this.node.childNodes[6], "click", false, function() {
if (self.doubleclick != null) {
clearInterval(self.doubleclick);
self.doubleclick = null;
if (window.iCliplite)
eval(iCliplite.clipBinDoubleClickFunctionAtPosition(self.index));
}
else {
self.doubleclick = setInterval(function() {
clearInterval(self.doubleclick);
self.doubleclick = null;
}, 300);
}
});
addEvent(this.node.childNodes[7], "mouseover", false, function(event) {
if (!self.button1.disabled) {
self.button1.hover = true;
self.node.childNodes[3].src = "media/bin/in/" + (self.button1.active ? "active" : "hover") + ".png";
}
event.stopPropagation();
});
addEvent(this.node.childNodes[7], "mousedown", false, function(event) {
if (!self.button1.disabled) {
self.button1.active = true;
self.node.childNodes[3].src = "media/bin/in/active.png";
event.returnValue = false;
}
});
addEvent(this.node.childNodes[7], "mouseout", false, function(event) {
if (!self.button1.disabled) {
self.button1.hover = false;
self.node.childNodes[3].src = "media/bin/in/normal.png";
}
event.stopPropagation();
});
addEvent(this.node.childNodes[8], "mouseover", false, function(event) {
if (!self.button2.disabled) {
self.button2.hover = true;
self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.active ? "active" : "hover") + ".png";
}
event.stopPropagation();
});
addEvent(this.node.childNodes[8], "mousedown", false, function(event) {
if (!self.button2.disabled) {
self.button2.active = true;
self.node.childNodes[4].src = "media/bin/delete/active.png";
event.returnValue = false;
}
});
addEvent(this.node.childNodes[8], "mouseout", false, function(event) {
if (!self.button2.disabled) {
self.button2.hover = false;
self.node.childNodes[4].src = "media/bin/delete/normal.png";
}
event.stopPropagation();
});
addEvent(this.node.childNodes[9], "mouseover", false, function(event) {
if (!self.button3.disabled) {
self.button3.hover = true;
self.node.childNodes[5].src = "media/bin/out/" + (self.button3.active ? "active" : "hover") + ".png";
}
event.stopPropagation();
});
addEvent(this.node.childNodes[9], "mousedown", false, function(event) {
if (!self.button3.disabled) {
self.node.childNodes[5].src = "media/bin/out/active.png";
self.button3.active = true;
event.returnValue = false;
}
});
addEvent(this.node.childNodes[9], "mouseout", false, function(event) {
if (!self.button3.disabled) {
self.button3.hover = false;
self.node.childNodes[5].src = "media/bin/out/normal.png";
}
event.stopPropagation();
});
addEvent(window, "mouseup", false, function(event) {
if (self.button1.active) {
self.button1.active = false;
if (self.button1.hover && self.iris.animator.timer == null) {
if (!self.iris.open) {
self.iris.callback = function() {
if (window.iCliplite)
iCliplite.handleClipInAtPosition(self.index);
self.refresh(false);
self.iris.callback = null;
self.iris.animator.start();
}
}
else {
if (window.iCliplite)
iCliplite.handleClipInAtPosition(self.index);
self.refresh(false);
}
self.iris.animator.start();
self.button2.disabled = false;
self.button3.disabled = false;
}
self.node.childNodes[3].src = "media/bin/in/" + (self.button1.disabled ? "disabled" : (self.button1.hover ? "hover" : "normal")) + ".png";
self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.disabled ? "disabled" : (self.button2.hover ? "hover" : "normal")) + ".png";
self.node.childNodes[5].src = "media/bin/out/" + (self.button3.disabled ? "disabled" : (self.button3.hover ? "hover" : "normal")) + ".png";
}
else if (self.button2.active) {
self.button2.active = false;
if (self.iris.animator.timer == null && self.button2.hover) {
if (event.shiftKey && event.altKey) {
for (var i = 0; i < maxBins; i++) {
if (!bins[i].iris.open) {
bins[i].button2.hover = false;
bins[i].button2.disabled = true;
bins[i].button3.disabled = true;
bins[i].node.childNodes[4].src = "media/bin/delete/disabled.png";
bins[i].node.childNodes[5].src = "media/bin/out/disabled.png";
bins[i].iris.open = false;
bins[i].iris.animator.start();
if (window.iCliplite) {
iCliplite.handleDeleteClipAtPosition(bins[i].index);
bins[i].node.childNodes[0].src = "";
}
}
}
}
else {
self.button2.hover = false;
self.button2.disabled = true;
self.button3.disabled = true;
self.iris.animator.start();
if (window.iCliplite) {
iCliplite.handleDeleteClipAtPosition(self.index);
self.node.childNodes[0].src = "";
}
}
}
self.node.childNodes[3].src = "media/bin/in/" + (self.button1.disabled ? "disabled" : (self.button1.hover ? "hover" : "normal")) + ".png";
self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.disabled ? "disabled" : (self.button2.hover ? "hover" : "normal")) + ".png";
self.node.childNodes[5].src = "media/bin/out/" + (self.button3.disabled ? "disabled" : (self.button3.hover ? "hover" : "normal")) + ".png";
}
else if (self.button3.active) {
self.button3.active = false;
if (self.button3.hover && self.highlighter.animator.timer == null) {
self.highlighter.animator.start();
if (window.iCliplite)
iCliplite.handleClipOutAtPosition(self.index);
}
self.node.childNodes[3].src = "media/bin/in/" + (self.button1.disabled ? "disabled" : (self.button1.hover ? "hover" : "normal")) + ".png";
self.node.childNodes[4].src = "media/bin/delete/" + (self.button2.disabled ? "disabled" : (self.button2.hover ? "hover" : "normal")) + ".png";
self.node.childNodes[5].src = "media/bin/out/" + (self.button3.disabled ? "disabled" : (self.button3.hover ? "hover" : "normal")) + ".png";
}
});
////
}
Bin.prototype.fade = function(out, callback) {
this.fader.out = out;
this.fader.callback = callback;
this.fader.animator.start();
}
Bin.prototype.refresh = function(open) {
if (window.iCliplite) {
if (iCliplite.isClipBinPopulatedAtPosition(this.index)) {
var self = this;
var image = new Image();
image.src = encodeURI(iCliplite.clipPreviewImageURLAtPosition(this.index));
image.onload = function() {
var context = self.node.childNodes[0].getContext("2d");
context.fillStyle = "white";
context.fillRect(0, 0, 72, 72);
context.drawImage(image, (72 - image.width) / 2, (72 - image.height) / 2);
}
if (image.complete)
image.onload();
if (open) {
if (this.iris.open)
this.iris.animator.start();
this.button2.disabled = false;
this.button3.disabled = false;
this.node.childNodes[4].src = "media/bin/delete/normal.png";
this.node.childNodes[5].src = "media/bin/out/normal.png";
}
}
else {
if (!this.iris.open) {
this.node.childNodes[0].src = "";
this.iris.open = false;
this.iris.animator.start();
this.button2.disabled = true;
this.button3.disabled = true;
this.node.childNodes[4].src = "media/bin/delete/disabled.png";
this.node.childNodes[5].src = "media/bin/out/disabled.png";
}
}
}
}
// Resize //
function Resizer() {
this.node = document.getElementById("resizer");
this.down = false;
this.downX = 0;
var self = this;
addEvent(this.node, "mousedown", false, function(event) {
self.down = true;
self.downX = event.clientX - self.node.offsetLeft;
event.returnValue = false;
});
addEvent(window, "mousemove", false, function(event) {
if (self.down) {
var grown = event.clientX - self.node.offsetLeft - self.downX;
var front = document.getElementById("front");
if (front.clientWidth + grown < 227)
grown = 227 - front.clientWidth;
else if (front.clientWidth + grown > 227 + ((maxBins - 1) * 102))
grown = (227 + ((maxBins - 1) * 102)) - front.clientWidth;
if (window.widget)
window.resizeBy(grown, 0);
front.style.width = ((front.clientWidth + grown) / 10) + "em";
front.childNodes[2].style.width = ((front.childNodes[2].clientWidth + grown) / 10) + "em";
front.childNodes[9].style.width = ((front.childNodes[9].clientWidth + grown) / 10) + "em";
scrollbar.refresh();
if (Math.floor((front.childNodes[9].clientWidth) / 102) > visibleBins && visibleBins < bins.length)
visibleBins += 1;
else if (Math.floor((front.childNodes[9].clientWidth) / 102) < visibleBins)
visibleBins -= 1;
}
});
addEvent(window, "mouseup", false, function() {
if (self.down) {
self.down = false;
var front = document.getElementById("front");
visibleBins = Math.round(front.childNodes[9].clientWidth / 102);
if (front.childNodes[2].clientWidth != (visibleBins * 102) + 75) {
if (window.widget)
window.resizeTo((visibleBins * 102) + 125, 148);
front.style.width = (((visibleBins * 102) + 125) / 10) + "em";
front.childNodes[2].style.width = (((visibleBins * 102) + 73) / 10) + "em";
front.childNodes[9].style.width = (((visibleBins * 102)) / 10) + "em";
scrollbar.refresh();
scrollbar.scrollArea(Math.round(scrollbar.area.scrollLeft / 102) * 102);
}
setPref("Bins", visibleBins);
}
});
}
////
// Events //
addEvent(window, "load", false, function() {
var instanceRunning = false;
if (window.iCliplite) {
iCliplite.initializeWithWidgetFolderURL(document.URL + "/../");
instanceRunning = iCliplite.isAnotherWidgetInstanceRunning();
}
if (!instanceRunning) {
binCount = getPref("Bins", 5);
maxBins = window.iCliplite ? iCliplite.clipBinCount() : 25;
for (var i = 0; i < maxBins; i++) {
bins[i] = new Bin();
bins[i].index = i + 1;
bins[i].refresh(true);
}
var resizeBy = ((binCount - 1) * 102) / 100;
var node = document.getElementById("front");
var binFades = new Array();
resize = new Animator(binCount * 333, 13, 0, 100, function(animation, now, first, done) {
if (window.widget)
window.resizeTo((now * resizeBy) + 227, 148);
node.style.width = (((now * resizeBy) + 227) / 10) + "em";
node.childNodes[2].style.width = (((now * resizeBy) + 175) / 10) + "em";
node.childNodes[9].style.width = (((now * resizeBy) + 102) / 10) + "em";
if (done) {
scrollbar = new Scrollbar(document.getElementById("scrollbar"), document.getElementById("bins"), true, 0, 0);
elementFader = new Animator(500, 13, 0, 1, function(animation, now, first, done) {
document.getElementById("record").style.opacity = now;
document.getElementById("scrollbar").style.opacity = now;
document.getElementById("resizer").style.opacity = now;
if (done) {
if (getPref("Recording", false))
buttons.instances["record"].start();
}
});
elementFader.start();
}
});
resize.start();
theResizer = new Resizer();
backResizer.animator = new Animator(500, 13, 0, 100, function(animation, now, first, done) {
if (window.widget) window.resizeTo(backResizer.from - (now * backResizer.multiplier), 148);
document.getElementById("back").style.width = ((backResizer.from - (now * backResizer.multiplier)) / 10) + "em";
document.getElementById("back").childNodes[2].style.width = ((backResizer.from - (now * backResizer.multiplier) - 54) / 10) + "em";
if (done) backFader.out ? flipMe(false) : backFader.animator.start();
});
backFader.animator = new Animator(500, 13, 0, 1, function(animation, now, first, done) {
document.getElementById("info").style.opacity = backFader.out ? 1 - now : now;
document.getElementById("inventive").style.opacity = backFader.out ? 1 - now : now;
document.getElementById("help").style.opacity = backFader.out ? 1 - now : now;
document.getElementById("url").style.opacity = backFader.out ? 1 - now : now;
document.getElementById("done").style.opacity = backFader.out ? 1 - now : now;
if (done && backFader.out) backResizer.animator.start();
});
addAnimatingButton(document.getElementById("record"), "record", 12, function() {
pollPlugin = !pollPlugin;
if (window.iCliplite && pollPlugin) {
if (buttons.instances["record"].timer != null && iCliplite.hasClipboardChanged()) {
var binIndexRecordedTo = iCliplite.recordClipboardChange();
for (var i = 1; i <= binIndexRecordedTo; i++) {
bins[i - 1].refresh(true);
}
scrollbar.scrollBar((binIndexRecordedTo - Math.round(front.childNodes[9].clientWidth / 102)) * 102);
}
}
}, 125, function() {
setPref("Recording", this.timer == null);
if (this.timer == null)
this.start();
else
this.stop();
});
addButton(document.getElementById("flip"), "flip", function() {
flipMe(true);
flip.shown = false;
});
addEvent(document.getElementById("url").childNodes[0], "click", false, function(event) {
if (window.widget) {
widget.openURL(this.href);
event.returnValue = false;
}
});
addButton(document.getElementById("help"), "help", function() {
if (window.widget)
widget.openURL("http://inventive.us/iCliplite/");
});
var done = document.getElementById("done");
addEvent(done, "mouseover", false, function() {
done.hover = true;
if (done.active) {
done.childNodes[1].src = "media/button/left_active.png";
done.childNodes[2].src = "media/button/middle_active.png";
done.childNodes[3].src = "media/button/right_active.png";
}
});
addEvent(done, "mousedown", false, function(event) {
done.active = true;
done.childNodes[1].src = "media/button/left_active.png";
done.childNodes[2].src = "media/button/middle_active.png";
done.childNodes[3].src = "media/button/right_active.png";
event.returnValue = false;
});
addEvent(window, "mouseup", false, function() {
if (done.active) {
done.active = false;
done.childNodes[1].src = "media/button/left.png";
done.childNodes[2].src = "media/button/middle.png";
done.childNodes[3].src = "media/button/right.png";
if (done.hover) {
done.hover = false;
backResizer.from = 468;
backResizer.multiplier = 0 - backResizer.multiplier;
backFader.out = true;
backFader.animator.start();
}
}
});
addEvent(done, "mouseout", false, function() {
done.hover = false;
if (done.active) {
done.childNodes[1].src = "media/button/left.png";
done.childNodes[2].src = "media/button/middle.png";
done.childNodes[3].src = "media/button/right.png";
}
});
flip = {node: document.getElementById("flip"), shown: false, animator: new Animator(500, 13, 0, 1, function(animation, now, first, done) {
flip.node.style.opacity = flip.shown ? now : 1 - now;
})};
addEvent(window, "mousemove", false, function(event) {
var one = document.getElementById("front");
var inside = event.clientX >= one.offsetLeft && event.clientX <= one.offsetLeft + one.clientWidth && event.clientY >= one.offsetTop && event.clientY <= one.offsetTop + one.clientHeight;
if (!flip.shown && inside) {
flip.shown = true;
flip.animator.start();
}
if (flip.shown && !inside) {
flip.shown = false;
flip.animator.start();
}
});
}
else
document.getElementById("multiple").style.display = "block";
});
if (window.widget) {
widget.onshow = function() {
visible = true;
}
widget.onhide = function() {
visible = false;
}
widget.onremove = function() {
if (iCliplite) iCliplite.finalize();
}
}
// Functions //
function flipMe(toBack) {
if (window.widget) widget.prepareForTransition(toBack ? "ToBack" : "ToFront");
if (toBack) {
frontSize = document.getElementById("front").clientWidth;
scrolled = document.getElementById("bins").scrollLeft;
document.getElementById("back").style.width = (frontSize / 10) + "em";
document.getElementById("back").childNodes[2].style.width = ((frontSize - 54) / 10) + "em";
}
document.getElementById((toBack ? "front" : "back")).style.top = "14.8em";
document.getElementById((toBack ? "front" : "back")).style.opacity = 0;
document.getElementById((toBack ? "back" : "front")).style.top = 0;
document.getElementById((toBack ? "back" : "front")).style.opacity = 1;
if (!toBack) {
for (var i = 0; i < maxBins; i++)
setTimeout("bins[" + i + "].refresh(false);", 0);
setTimeout("document.getElementById('bins').scrollLeft = scrolled;", 0);
}
if (window.widget) setTimeout("widget.performTransition();", 0);
setTimeout(function() {
if (toBack) {
backFader.out = false;
backResizer.from = frontSize;
backResizer.multiplier = (frontSize - 468) / 100;
backResizer.animator.start();
}
}, 1000);
}
function beep() {
if (window.iCliplite)
iCliplite.beep();
}
// Variables //
var bins = new Array();
var flip = null;
var recording = null;
var resize = null;
var theResizer = null;
var visibleBins = 0;
var scrollbar = null;
var done = {hover: false, active: false};
var visible = true;
var elementFader = null;
var maxBins = 0;
var binCount = 0;
var scrolled = 0;
var frontSize = 0;
var pollPlugin = false;
var backResizer = {from: 0, multiplier: 0, animator: null};
var backFader = {out: false, animator: null};